<template>
  <div style="font-size: 12px;line-height: 60px;display: flex">
    <div style="font-size: 20px;flex: 1">
      <span style="cursor: pointer;font-size: 18px" :class="collapseBtnClass" @click="collapse"></span>

      <!-- 页签 -->
      <el-breadcrumb separator="/" style="display: inline-block;margin-left: 20px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-dropdown style="width: 70px;cursor: pointer">
      <span>王小虎</span>
      <i class="el-icon-setting" style="margin-left: 5px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>修改密码</el-dropdown-item>
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import {EventBus, EventNames} from "@/utils/EventBus";

export default {
  name: "Header",
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
    }
  },
  computed: {
    currentPathName() {
      return this.$store.state.currentPathName;
    }
  },
  watch: {
    currentPathName(newVal,oldVal) {
      console.log(newVal)
    }
  },
  methods: {
    collapse() {
      // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse;
      console.log(this.isCollapse);
      if (this.isCollapse) {
        EventBus.$emit(EventNames.MESSAGE_ONE, 64);
        EventBus.$emit(EventNames.MESSAGE_TWO, false);
        this.collapseBtnClass = 'el-icon-s-unfold'
      } else {
        EventBus.$emit(EventNames.MESSAGE_ONE, 200);
        EventBus.$emit(EventNames.MESSAGE_TWO, true);
        this.collapseBtnClass = 'el-icon-s-fold'
      }
    }
  }
}
</script>

<style scoped>

</style>